// // 获取装轮播图的大盒子
var viewpag = document.getElementsByClassName('Rotationchart')[0]
//获取小圆点
var circle = document.getElementsByClassName('hui')
function autopla() {
    var fla = 0;
    setInterval(function () {
        if (fla == circle.length) {
            fla = 0;
        }
        for (var j = 0; j < circle.length; j++) {
            circle[j].className = 'hui';
        };
        circle[fla].className = "hui bai";
        var targe = fla * (-1600);
        animationFun2(viewpag, targe);
        fla++;
    }, 2000);
};
autopla();
for (var i = 0; i < circle.length; i++) {
    circle[i].index = i;
    circle[i].onmouseover = function () {
        for (var j = 0; j < circle.length; j++) {
            circle[j].className = 'hui';
        };
        this.className = "hui bai";
        var targe = this.index * (-1600);
        animationFun2(viewpag, targe);
    }
};
//上半部分轮播结束
// 左右按钮
var prev = document.getElementsByClassName('left-0')[0]
var next = document.getElementsByClassName('right-0')[0]
// 轮播
var viewpage = document.getElementsByClassName('n-carousel')[0]
// 小圆点
var circles = document.getElementsByClassName('ming')



var flag = 0;
// 轮播移动的标志位
var count = 0;
// 小圆点样式的排他函数
function backstart(ele) {
    for (var i = 0; i < ele.length; i++) {
        ele[i].className = 'ming';
    }
};
// 绑定右按钮点击事件
next.onclick = function () {
    // 小圆点
    flag++;
    if (flag == circles.length) {
        flag = 0;
    }
    // 设置小圆点样式
    // 排他
    backstart(circles);
    circles[flag].className = 'ming an';
    // ******小圆点变化代码结束******
    count++;
    if (count == viewpage.children.length) {
        // 拉回left=0
        viewpage.style.left = 0;
        count = 1;
    };
    var target = count * (-600);
    // 进行缓慢移动
    animationFun2(viewpage, target);
};
// ④:给左按钮绑定事件
prev.onclick = function () {
    // ******小圆点变化代码开始******
    flag--;
    if (flag < 0) {
        flag = circles.length - 1;
    }
    // 设置小圆点的样式
    // 排他
    backstart(circles);
    circles[flag].className = 'ming an';
    // ******小圆点变化代码结束******
    if (count == 0) {
        count = viewpage.children.length - 1;
        viewpage.style.left = count * (-600) + 'px';
    };
    count--;
    var target = count * (-600);
    // 进行缓慢移动
    animationFun2(viewpage, target);
}
// ⑤:自动轮播调用右按钮事件
function autoplay() {
    viewpage.autoId = setInterval(function () {
        // 调用绑定右按钮事件
        next.onclick();
    }, 3000)
};
autoplay();
// ⑥:焦点轮播
// 循环给所有小圆点绑定点击事件
for (var i = 0; i < circles.length; i++) {
    // 保存i值到index属性中
    // 给DOM元素设置index的属性
    circles[i].index = i;
    circles[i].onmouseover = function () {
        // 直接设置同步
        flag = this.index;
        count = this.index;
        console.log(flag);
        console.log(count);
        // 1.小圆点的样式改变
        // 排他思想
        for (var j = 0; j < circles.length; j++) {
            circles[j].className = 'ming';
        };
        // 点击谁,谁变黑
        this.className = "ming an";
        var target = this.index * (-600);
        // 进行缓慢移动
        animationFun2(viewpage, target);
    }
};
// 缓慢动画
function animationFun2(ele, target) {
    // 先清除另外一个方向的定时器
    clearInterval(ele.interId);
    // 把定时器的id设置到DOM元素上
    ele.interId = setInterval(function () {
        if (ele.offsetLeft == target) {
            clearInterval(ele.interId);
        } else {
            var step = (target - ele.offsetLeft) / 10;
            // 当step为小数时,进行上下取整
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            ele.style.left = ele.offsetLeft + step + 'px';
        }
    }, 20);
};

